<template>
  <div class="page-content">
    <binTable
      :tableColumnProps="tableColumnProps"
      :listData="pageList"
      :listCount="pageListCount"
      v-model:page="pageInfo"
    >
      <!-- 操作按钮 -->
      <template #handle="scope">
        <el-button link type="primary" :icon="View" @click="handleCheck(scope.row)">
          查看选择的课程
        </el-button>
      </template>
    </binTable>

    <el-drawer v-model="isShow" :title="title" direction="rtl" size="55%">
      <el-table :data="tableData" border stripe >
        <el-table-column property="course_name" label="课程名称" width="170px" align="center" />
        <el-table-column property="college_name" label="所属院系" align="center" />
        <el-table-column property="major_name" label="所属专业" align="center" />
        <el-table-column property="credit" label="学分" align="center" />
        <el-table-column property="lesson_period" label="学时" align="center" />
        <el-table-column property="location" label="上课地点" align="center" />
        <el-table-column property="type" label="课程类型" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.type === 1 ? 'warning' : ''">
              {{ scope.row.type === 1 ? '主修' : '选修' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script setup>
import { View } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import binTable from '@/base-ui/table'
import { binMsg } from '@/global/api.js'
import { findAllTeacherCourseWithStu } from '@/services/selectLesson.js'

const props = defineProps({
  // table 的配置文件
  tableColumnProps: {
    type: Object,
    required: true
  },
  // 当前页面所属
  pageName: {
    type: String,
    required: true
  },
  moduleName: {
    type: String,
    required: true
  }
})

const store = useStore()
const userInfo = computed(() => store.state.userModule.userInfo)
const isShow = ref(false)
const title = ref('')
const tableData = ref([])

// 转递给 table 组件的分页数据
const pageInfo = ref({
  page_num: 1,
  page_size: 10
})
const emit = defineEmits(['pageInfoChange'])

// 当页数发生变化，就通知父组件查询数据
watch(
  () => pageInfo.value,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 数据列表
const pageList = computed(() => store.state.lessonManageModule.myStuList)
// 数据列表数量
const pageListCount = computed(() => store.state.lessonManageModule.myStuCount)

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  binMsg().closeAll()
  // 查找用户数据
  store.dispatch(`${props.moduleName}/searchMyStuAction`, {
    pageName: props.pageName,
    ...formValue,
    ...pageInfo
  })
}

// 查看已选的课程
const handleCheck = async (row) => {
  title.value = `学生：${row.name}，选择了您如下课程`
  isShow.value = true
  const { data: res } = await findAllTeacherCourseWithStu(row.stu_num, userInfo.value.id)
  console.log(res)
  tableData.value = [...res.data.data]
}

defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.userDetail {
  .avatar {
    margin-top: 15px;
  }
  .info {
    font-size: 16px;
    margin-left: 50px;
  }
}
</style>
